<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 在线快捷 照片打印</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<style>
			.ip-row {
				margin-top: 40px;
				margin-bottom: 40px;
			}
			
			.ip-p {
				margin-bottom: 30px;
			}
		</style>
	</head>

	<body>
		<!-- 菜单导航 -->
		<div th:insert="~{front/head :: header}"></div>
		<div id="ctxPath" th:src="@{/}"></div>
		<!--主体-->
		<div class="layui-container">
			<!--商品购买-->
			<div class="layui-row ip-row">
				<div class="layui-col-md5">
					<img th:src="@{/img/photo.jpg}" />
				</div>
				<div class="layui-col-md7">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>照片快印 - 毕业照/生活照/手机照/纪念照</legend>
					</fieldset>
					<form class="layui-form" th:action="@{/order/upload}" th:method="post" id="fo">
						<!--打印份数-->
						<div class="layui-form-item">
							<label class="layui-form-label">打印份数</label>
							<div class="layui-input-inline">
								<input name="count" required lay-verify="required|count" value="1" autocomplete="off" class="layui-input">
								<input name="title" type="hidden" value="photo">
							</div>
						</div>
						<!--打印类型-->
						<div class="layui-form-item">
							<label class="layui-form-label">打印类型</label>
							<div class="layui-input-block">
								<input type="radio" name="printType" value="快印" title="快印" price="0" checked="checked">
								<input type="radio" name="printType" value="冲洗" title="冲洗" price="0.1">
							</div>
						</div>
						<!--照片尺寸-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张尺寸</label>
								<div class="layui-input-inline">
									<select name="pageSize">
										<option value="5寸" price="0">5寸</option>
										<option value="6寸" price="0.7">6寸</option>
										<option value="7寸" price="0.7">7寸</option>
										<option value="8寸" price="0.7">8寸</option>
										<option value="10寸" price="0.7">10寸</option>
										<option value="12寸" price="0.7">12寸</option>
										<option value="14寸" price="0.7">14寸</option>
									</select>
								</div>
							</div>
						</div>
						<!--有无边距-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">有无边距</label>
								<div class="layui-input-inline">
									<select name="margin">
										<option value="有边距" price="0">有边距</option>
										<option value="无边距" price="0.1">无边距</option>
									</select>
								</div>
							</div>
						</div>
						<!--所用工艺-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">工艺</label>
								<div class="layui-input-inline">
									<select name="craftwork">
										<option value="无工艺" price="0">不使用工艺</option>
										<option value="塑封" price="0">塑封</option>
									</select>
								</div>
							</div>
						</div>
						<!---->
						<blockquote class="layui-elem-quote">
							<p style="font-size: xx-large;color: red;" id="final">￥0.1元</p>
						</blockquote>
						<!--提交-->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn-lg layui-btn-danger " lay-submit="" lay-filter="put">立即提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="layui-row ip-row">
				<img th:src="@{/img/sss.png}" style="width: 100%;">
			</div>
			<!--商品-->
			<div class="layui-row ip-row">
				<div class="layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">商品详情</li>
						<li>打印指导</li>
					</ul>
					<div class="layui-tab-content">
						<!--详情信息-->
						<div class="layui-tab-item layui-show">
							<!--价格信息-->
							<div layui-row ip-row>
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>打印价格表</legend>
								</fieldset>
								<table class="layui-table">
									<colgroup>
										<col width="16%">
										<col width="13%">
										<col width="13%">
										<col width="13%">
										<col width="13%">
										<col width="13%">
										<col width="13%">
									</colgroup>
									<thead>
										<tr>
											<th>制作方式</th>
											<th>纸张类型</th>
											<th>纸张尺寸</th>
											<th>纸张克数</th>
											<th>价格</th>
											<th>工艺</th>
											<th>价格</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td rowspan="2">快印</td>
											<td>高光</td>
											<td>5寸</td>
											<td>180g</td>
											<td>1.50</td>
											<td>塑封</td>
											<td>1.20</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>6寸</td>
											<td>180g</td>
											<td>1.80</td>
											<td>塑封</td>
											<td>1.20</td>
										</tr>
										<tr>
											<td rowspan="7">冲洗</td>
											<td>高光</td>
											<td>5寸</td>
											<td>180g</td>
											<td>0.60</td>
											<td>塑封</td>
											<td>0.60</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>6寸</td>
											<td>180g</td>
											<td>0.70</td>
											<td>塑封</td>
											<td>0.70</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>7寸</td>
											<td>180g</td>
											<td>1.50</td>
											<td>塑封</td>
											<td>1.20</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>8寸</td>
											<td>180g</td>
											<td>2.50</td>
											<td>塑封</td>
											<td>2.00</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>10寸</td>
											<td>180g</td>
											<td>4.00</td>
											<td>塑封</td>
											<td>3.00</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>12寸</td>
											<td>180g</td>
											<td>6.00</td>
											<td>塑封</td>
											<td>5.00</td>
										</tr>
										<tr>
											<td>高光</td>
											<td>14寸</td>
											<td>180g</td>
											<td>7.00</td>
											<td>塑封</td>
											<td>6.00</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div layui-row >
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>尺寸说明表</legend>
								</fieldset>
								<table class="layui-table">
									<colgroup>
										<col width="33%">
										<col width="33%">
										<col width="33%">
									</colgroup>
									<thead>
										<tr>
											<th>常规照片尺寸</th>
											<th>照片规格(单位：厘米)</th>
											<th>建议像素</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>5寸</td>
											<td>12.7*8.9</td>
											<td>1500*1051</td>
										</tr>
										<tr>
											<td>6寸</td>
											<td>15.2*10.2</td>
											<td>1795*1205</td>
										</tr>
										<tr>
											<td>7寸</td>
											<td>12.7*17.8</td>
											<td>1700*1240</td>
										</tr>
										<tr>
											<td>8寸</td>
											<td>15.2*20.3</td>
											<td>1795*2398</td>
										</tr>
										<tr>
											<td>10寸</td>
											<td>20.3*25.4</td>
											<td>3000*2400</td>
										</tr>
										<tr>
											<td>12寸</td>
											<td>25.4*30.5</td>
											<td>3600*3000</td>
										</tr>
										<tr>
											<td>14寸</td>
											<td>25.4*35.5</td>
											<td>4200*3000</td>
										</tr>
									</tbody>
								</table>
							</div>
							<!--提示信息-->
							<div class=" layui-row ip-row ">
								<fieldset class="layui-elem-field small ">
									<legend>
										<span class="layui-badge-dot "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot layui-bg-green "></span> 温馨提示
										<span class="layui-badge-dot layui-bg-green "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot "></span>
									</legend>
									<div class="layui-field-box ">
										<p>1、平台实行明码标价，将成本以及利润降到最低，将打印质量和真诚的服务回馈给客户；</p>
										<p>2、我们会在打印完成前后认真检查，但由于订单数目多，难免出现其他情况，当您收到订单后出现质量，数量配送时间等问题，请及时联系客户；</p>
										<p>3、照片目前只支持JPG/JPEG/PNG格式，如果格式不符合请您转换后再进行上传；</p>
									</div>
								</fieldset>
							</div>
						</div>
						<!--打印指导-->
						<div class="layui-tab-item">
							<div class="layui-row">
								<fieldset class="layui-elem-field small ">
									<legend>
										<p style="font-size: xx-large;color: red;">打印指导</p>
									</legend>
									<div class="layui-field-box ">
										<p class="ip-p">
											<span class="layui-badge-dot"></span> 上传的文件不要超过200M，支持的格式有：JPG/JPEG/PNG,如果需要打印多份，可在线调整数量。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-orange"></span> 下单前，请确认好照片像素尺寸、张数以及价格，确认好打印参数。对打印的照片有特殊要求的请留言备注，如果忘记留言可在线沟通客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-green"></span> 一切打印资料给予保密处理，文件打印文笔立即删除，如需要再打印源文件请重新上传并下单，不便之处请谅解。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-cyan"></span> 爱打印在线打印平台，专注于校园云打印，承诺普通文档打印，3小时内送达，如超出时间，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-blue"></span> 配送时间说明：晚上8点之前完成付款的订单，正常当晚10点前送达(如遇校区关门等特殊情况，配送人员会电话联系)，晚8点之后的订单，正常是第二天10：30分之前送达。如遇特殊急件，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-black"></span> 如订单配送至指定位置的，订单状态是已配送的状态。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-gray"></span> 取件之后请及时检查文件，如有任何问题，都可以与客服联系，我们希望您拿到的都是满意的，爱打印时刻为您提供贴心便捷的打印服务。
										</p>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--js-->
        <script th:src="@{/layui/layui.js}"></script>
		<script type="text/javascript ">
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			});
		</script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				//自定义验证规则
				form.verify({
					count: [/^(?!0)(?:[0-9]{1,3}|1000)$/,'数量必须在1到1000以内的数字']
				});
				//监听提交
				 form.on('submit(put)', function(data) {
					 var isLogin = false;
					 $.ajax({
							cache:true,
							type:"GET",
							url: ctxPath+"isLogin",
							async: false,
							success: function(data) {
								if(data == "yes") {
									isLogin = true;
								} else if(data == "no"){
                                    alert("sdfsdfsdf");
									layer.msg("您还没有登陆,正在为您跳转到登陆页面！");
									setTimeout(function(){
										location.href=ctxPath+"login";
									},2000);
								}else{
									layer.msg("未知错误，请联系管理员！");
								}
							}
						});
					 return isLogin;
				});
			});
		</script>
	</body>

</html>